<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>工作预览</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/aliyun.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
		<style>
			body {
				background: #fff;
			}

			[v-cloak] {
				display: none;
			}

			* {
				margin: 0;
				padding: 0;
			}

			#app {
				padding: 55px 15px 40px;
				background: white;
			}

			#app .work {
				line-height: 30px;
				height: 40px;
				color: #777;
			}

			.work span {
				color: #444;
			}

			ul {
				width: 100%;
			}

			ul li {
				width: 100%;
				margin: 10px auto 0;
				float: left;
			}

			ul li img {
				width: 40%;
				height: 100px;
				margin: 10px 5%;
				border-radius: 6px;
			}

			ul li p {
				text-align: center;
				line-height: 30px;
			}

			ul li h4 {
				font-size: 15px;
				font-weight: 200;
				padding: 5px;
			}

			ul li button {
				width: 120px;
				height: 40px;
				font-size: 16px;
				color: white;
				background: #1E90FF;
				border-radius: 10px;
				margin: 10px auto;
				display: block;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">工作台</h1>
			</header>

			<div class="work">
				<span>{{time.year}}年</span>
				<span>{{time.month}}月</span>
				<span>{{time.day}}日</span>
				<span>{{time.week}}</span>
				<span class="time"></span>
			</div>
			<div class="work"><span>负责区域</span>：经开区</div>
			<div class="work"><span>负责卫生间</span>：{{info.toiletName}}</div>
			<div class="work"><span>卫生间地址</span>：{{info.toiletDetailAddress}}</div>
			<div style="height: 40px;"></div>
			<ul>
				<li v-if="info.toiletPicture.length == 1">
					<img v-for='o in info.toiletPicture' style="width: 90%;height: 200px;" :src="o" alt="">
					<p style="clear: both;"></p>
				</li>
				<li v-if="info.toiletPicture.length == 2">
					<img v-for='o in info.toiletPicture' :src="o" alt="">
					<p style="clear: both;"></p>
				</li>
				<li v-if="info.toiletPicture.length == 3">
					<img v-for='o in info.toiletPicture' style="width: 29%;margin: 10px 2%;" :src="o" alt="">
					<p style="clear: both;"></p>
				</li>
				<li v-if="info.toiletPicture.length == 4 || info.toiletPicture.length == 5">
					<img v-for='o in info.toiletPicture.slice(0,4)' :src="o" alt="">
					<p style="clear: both;"></p>
				</li>
				<li v-if="info.toiletPicture.length > 5">
					<img v-for='o in info.toiletPicture.slice(0,6)' style="width: 29%;margin: 10px 2%;" :src="o" alt="">
					<p style="clear: both;"></p>
				</li>
				<li>
					<button @click="open_info(info.toiletName)">进入打卡</button>
				</li>
			</ul>
			<div style="clear: both;"></div>

		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.min.js"></script>
	<script src="../js/jquery-3.1.0.js"></script>
	<script src="js/tools.js"></script>
	<script src="js/gps.js"></script>
	<script src="js/date.js"></script>
	<script src="../js/vue-resource.js"></script>

	<script>
		window.onload = function() {

			mui.init({
				pullRefresh: {
					container: "#app", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#1E90FF', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '60px', //可选,默认50px.下拉刷新控件的高度,
						range: '120px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '45px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次 
						callback: function() {
							TOOL.setFire("html/mine.html", "user_info");
							window.location.reload();
							mui.toast("刷新成功");
						} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			// 判断plus
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			// 执行plus
			function plusReady() {
				if (localStorage.getItem("token")) {
					// 设置系统状态栏背景为蓝色
					plus.navigator.setStatusBarBackground("#eee");
					// 设置系统状态栏样式为浅色文字
					plus.navigator.setStatusBarStyle("dark");
				}
				var app = new Vue({
					el: "#app",
					data: {
						user_id: '',
						info: {},
						time: '',
						toilet_id: '',
						person_id: localStorage.getItem("user_person_id"),
					},
					methods: {
						get_info: function() {
							if (this.user_id) {
								var data = {
									userId: this.user_id,
								}
								this.$http.post(TOOL.Host + "toiletInfoController/queryToiletInfoByUserId", {
										data: JSON.stringify({
											userId: this.user_id
										})
									}, {
										emulateJSON: true,
										headers: {
											'sourceType': "APP"
										}
									})
									.then(function(res) {
										if (res.data.code == '0') {
											var newdata = res.data.data;
											app.info = newdata;
											app.toilet_id = newdata.toiletId;
											localStorage.setItem('toilet_jd', newdata.toiletLocationX);
											localStorage.setItem('toilet_wd', newdata.toiletLocationY);
										} else if (res.data.code == '2') {
											mui.toast('请联系管理员添加对应公厕');
										} else {
											mui.toast(res.msg);
										}
									}, function(res) {
										console.log(res)
									});

							}
						},
						get_time: function() {
							var data = {
								dateType: 1,
							} 
							this.$http.post(TOOL.Host + "loginController/querySysDateOrTime", {
									data: JSON.stringify({
										dateType: 1,
									})
								}, {
									emulateJSON: true,
									headers: {
										'sourceType': "APP"
									}
								})
								.then(function(res) {
									console.log(JSON.stringify(res.data));
									if (res.data.code == '0') {
										app.time=res.data.data;
										showCal(res.data.data.year,res.data.data.month,res.data.data.day);
									}
									else {
										mui.toast('时间信息请求失败！')
									}
								}, function(res) {
									console.log(res)
								});
						},
						open_info: function(name) {
							mui.openWindow({
								url: 'clock_in.html',
								id: "html/clock_in.html",
								extras: {
									title: name,
									toilet_id: this.toilet_id
								}
							});
						},

					},
					created: function() {
						this.user_id = localStorage.getItem("user_id");
						this.get_info();
						this.get_time();
						TOOL.getFire("get_info", function() {
							app.user_id = localStorage.getItem("user_id");
							app.get_info();
							app.get_time();
						});
						
						plus.geolocation.getCurrentPosition(function(p) {
							// 因为plus.geolocation.getCurrentPosition 获得是gps数值 WGS-84  然后我们在百度地图网页上面需要的是百度地图所以
							// 中心思想就是把 GPS坐标转化为 百度地图坐标.
							var x = p.coords.longitude;
							var y = p.coords.latitude;
							//WGS-84 to GCJ-02
							var dstarr = GPS.gcj_encrypt(x, y);
							//GCJ-02 to BD-09
							var dstarr2 = GPS.bd_encrypt(dstarr['lon'], dstarr['lat']);

							var currentX = dstarr2['lon']
							var currentY = dstarr2['lat']

							localStorage.setItem("currentX", currentX);
							localStorage.setItem("currentY", currentY);

						}, function(e) {
							alert('Geolocation error: ' + e.message);
						});
						
						var that = this;
						function upload_time() {
							window.loc_timer = setInterval(function() {
								var my_x = localStorage.getItem("currentX");
								var my_y = localStorage.getItem("currentY");								
								
								that.$http.post(TOOL.Host + "toiletPersonController/savePersonLocation", {
										data: JSON.stringify({
											personId: app.person_id,
											personLocationX: my_x,
											personLocationY: my_y
										})
									}, {
										emulateJSON: true,
										headers: {
											'sourceType': "APP"
										}
									})
									.then(function(res) {
										console.log(JSON.stringify(res.data))
										console.log(my_x);
										console.log(my_y);
									}, function(res) {
										console.log(res)
									});
								
							}, 3000)

						}


						//监听开始上传位置信息
						TOOL.getFire("start_upload_location", function() {
							upload_time();
						})
						//监听结束上传位置信息
						TOOL.getFire("end_upload_location", function() {
							clearInterval(loc_timer);
						})
						if (localStorage.getItem("upload_location")) {
							if (localStorage.getItem("upload_location") == 1) {
								upload_time();
							}
						}

					}


				}); //vue

			}
		}
	</script>
</html>
